<script setup lang="ts">
	import { useCorps } from "./utils/hook";
	import Refresh from "@iconify-icons/ep/refresh";
	import AddFill from "@iconify-icons/ri/add-circle-line";
  import BookmarkFill from "@iconify-icons/ri/bookmark-fill";
	import { PureTableBar } from "@/components/RePureTableBar";
	import { useRenderIcon } from "@/components/ReIcon/src/hooks";
	import { ref, reactive, onMounted, nextTick, computed } from "vue";
  import More from "@iconify-icons/ep/more-filled";
  import { Printer, ArrowDown } from '@element-plus/icons-vue'
  import dayjs from 'dayjs';
  import { message } from "@/utils/message";
  import {
    projectUpdateStatusApi,
    projectShowApi
  } from "@/api/projectApi";
	const {
		form,
		loading,
		columns,
		dataList,
		pagination,
		isShow,
		onSearch,
		resetForm,
		openDialog,
		handleSizeChange,
		handleCurrentChange,
		deviceDetection,
		handleDelete,
    treeChange,
    treeIndex,
    multipleTaskChange,
    userSelect,
    taskDialog,
    invoicingDetail,
    expandColumns
	} = useCorps();
	const formRef = ref();

  const dialogProjectStatus = ref(false)
  const dialogInfo = ref()
  const dialogProjectTitle = ref()
  const seeDetail = (url) => {
    window.open(url, '_blank');
  }

  const projectTypeChange = (val) => {
    for (let item of form.taskTypeOptionsCopy) {
      item.disabled = false
    }

    if(val === 1) {
      form.taskTypeOptionsCopy[8].disabled = true;
      form.taskTypeOptionsCopy[9].disabled = true;
    }
    if(val === 4 || val === 5) {
      form.taskTypeOptionsCopy[4].disabled = true;
      form.taskTypeOptionsCopy[5].disabled = true;
    }
    if(val === 6) {
      form.taskTypeOptionsCopy[4].disabled = true;
      form.taskTypeOptionsCopy[5].disabled = true;
      form.taskTypeOptionsCopy[8].disabled = true;
      form.taskTypeOptionsCopy[9].disabled = true;
    }
  }
  const handleProject = async(title, row) => {

    const res: any = await projectShowApi({ projectId: row.projectId });
    dialogInfo.value = res?.result ?? {}
    dialogProjectStatus.value = true
    dialogProjectTitle.value = title
    if(title === '激活项目') {
      newFormInline.rangeHandleDate = null
    } else {
      newFormInline.rangeHandleDate = dayjs().format('YYYY-MM-DD')
    }
  }
  const newFormInline = reactive({
    rangeHandleDate: null,
    remarks: ''
  })
  const confirmDialogProject = () => {
    let params = {}
    if(!newFormInline.rangeHandleDate) {
      message("请选择日期", {
        type: "warning"
      });
      return
    }
    if(dialogProjectTitle.value === '启动项目') {
      params = {
        projectId: dialogInfo.value.projectId,
        operateType: 3,
        remarks: newFormInline.remarks,
        handleStartDate: newFormInline.rangeHandleDate
      }
    } else if(dialogProjectTitle.value === '挂起项目') {
      params = {
        projectId: dialogInfo.value.projectId,
        operateType: 4,
        remarks: newFormInline.remarks,
      }
    } else if(dialogProjectTitle.value === '关闭项目') {
      params = {
        projectId: dialogInfo.value.projectId,
        operateType: 5,
        remarks: newFormInline.remarks,
        // handleStartDate: newFormInline.rangeHandleDate,
        handleEndDate: newFormInline.rangeHandleDate,
      }
    } else if(dialogProjectTitle.value === '激活项目') {
      params = {
        projectId: dialogInfo.value.projectId,
        operateType: 6,
        remarks: newFormInline.remarks,
        handleStartDate: newFormInline.rangeHandleDate[0],
        handleEndDate: newFormInline.rangeHandleDate[1],
      }
    } else if(dialogProjectTitle.value === '完成项目') {
      params = {
        projectId: dialogInfo.value.projectId,
        operateType: 7,
        remarks: newFormInline.remarks,
        handleEndDate: newFormInline.rangeHandleDate,
      }
    }
    projectUpdateStatusApi(params).then(async(res: any)=> {
      if(res?.code === 200) {
        message("操作成功", {
          type: "success"
        });

        dialogProjectStatus.value = false
        onSearch();

      }
    }).catch(error => {
      message(error.response.data.msg ?? "操作失败,请联系管理员", {
        type: "error"
      });
    });
  }
  const contentRef = ref();
  const tableWidth = ref()
  onMounted(()=> {
    tableWidth.value = contentRef.value.offsetWidth
    observer.observe(contentRef.value)

  })

  const observer = new ResizeObserver(entries => {
    entries.forEach(entry => {
      tableWidth.value = entry.contentRect.width
    })
  })
  const tabIndex = ref(0)
  const tabList = ref([
    {name: '我负责的'},
    {name: '我创建的'},
  ])
  const taskInit = (index: number) => {
    tabIndex.value = index
    if(index === 0) {
      form.listType = 'createByMe'
    } else if(index === 1) {
      form.listType = 'principalByMe'
    }
    nextTick(() => {
      onSearch()
    })

  }
  const setRowClassName = ({ row }) => {
    if (!row.childrens || row.childrens.length === 0) {
      return 'no-expand'
    }
    return ''
  }
  const cascaderProps = computed(() => ({
    showPrefix: false,
    checkStrictly: true,
    checkOnClickNode: true,
    checkOnClickLeaf: true,
    label: 'name',
    children: 'child'
  }))
  const handleVisibleChange = async () => {
    await nextTick();
    document.querySelectorAll('.el-cascader-node__label').forEach((el: any) => {
      el.onclick = () => el.previousElementSibling?.click();
    });
  };
  const getRowClassName = ({row, rowIndex}) => {
    if (rowIndex === 2) { // 假设你要修改第三行（索引为2）
      return 'custom-row-tr';
    }
    return '';
  }
</script>

<template>
	<div class="main">
		<el-form ref="formRef" :inline="true" :model="form"
			class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
			<el-form-item label="项目名称:">
				<el-input v-model="form.projectName" class="!w-[180px]" clearable placeholder="请输入项目名称" />
			</el-form-item>
      <el-form-item label="项目编号:">
      	<el-input v-model="form.projectNo" class="!w-[180px]" clearable placeholder="请输入项目编号" />
      </el-form-item>
      <el-form-item label="项目类型:">
        <el-select
          v-model="form.projectType"
          placeholder="请选择"
          class="!w-[130px]"
          clearable
          @change="projectTypeChange"
        >
          <el-option
            v-for="item in form.projectTypeOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="执行阶段:">
        <!-- <el-select
            v-model="form.taskType"
            placeholder="请选择"
            class="!w-[140px]"
            clearable
          >
            <el-option
              v-for="item in form.taskTypeOptionsCopy"
              :key="item.value"
              :label="item.name"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select> -->
          <el-cascader
            v-model="form.taskType"
            :options="form.taskTypeOptionsCopy"
            :props="cascaderProps"
            :show-all-levels="false"
            @visible-change="handleVisibleChange"
            clearable
            class="!w-[180px]"
          />
      </el-form-item>
      <el-form-item label="状态:">
        <el-select
            v-model="form.status"
            placeholder="请选择"
            class="!w-[100px]"
            clearable
          >
            <el-option label="未开始" :value="0" />
            <el-option label="进行中" :value="1" />
            <el-option label="已挂起" :value="2" />
            <el-option label="已完成" :value="3" />
            <el-option label="已关闭" :value="4" />
          </el-select>
      </el-form-item>
      <el-form-item label="电控:">
        <el-select
          v-model="form.electControl"
          placeholder="请选择"
          class="!w-[100px]"
          clearable
        >
          <el-option label="否" :value="0" />
          <el-option label="是" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="货款类型:">
        <el-select
          v-model="form.consignType"
          placeholder="请选择"
          class="!w-[100px]"
          clearable
        >
          <el-option label="发货款" :value="1" />
          <el-option label="到货款" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="交付状态:">
        <el-select
          v-model="form.isDelive"
          placeholder="请选择"
          class="!w-[100px]"
          clearable
        >
          <el-option label="未交付" :value="0" />
          <el-option label="已交付" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="收款标识:">
        <el-select
          v-model="form.receiptFull"
          placeholder="请选择"
          class="!w-[100px]"
          clearable
        >
          <el-option label="未结清" :value="0" />
          <el-option label="已结清" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间筛选:">
        <el-select
          v-model="form.timeType"
          placeholder="请选择"
          class="!w-[110px]"
          clearable
        >
          <el-option label="合同开始" value="startDate" />
          <el-option label="合同结束" value="endDate" />
          <el-option label="计划开始" value="planStartDate" />
          <el-option label="计划结束" value="planEndDate" />
        </el-select>
        <el-date-picker
          class="!w-[260px] ml-[5px]"
          v-model="form.rangeDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>

			<el-form-item>
				<el-button type="primary" :icon="useRenderIcon('ri:search-line')" :loading="loading" @click="onSearch">
					搜索
				</el-button>
				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
					重置
				</el-button>
			</el-form-item>
		</el-form>
		<div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
			<PureTableBar :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
				style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)" title=" " :columns="columns"
				@refresh="onSearch">

        <template #title>
          <div class="flex-c">
            <el-button v-for="(item, index) in tabList" :key="index" :class="tabIndex === index?'taskMyActive':''" @click="taskInit(index)">
            {{item.name}}</el-button>
          </div>
        </template>
				<template #buttons>
					<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog()">
						创建项目
					</el-button>
				</template>
				<template v-slot="{ size, dynamicColumns }">
					<pure-table ref="tableRef" showOverflowTooltip table-layout="auto"
						:loading="loading" :size="size" adaptive :adaptiveConfig="{ offsetBottom: 108 }" @cell-dblclick="(row)=>{openDialog('任务详情', row)}"
						:data="dataList" :columns="dynamicColumns" :pagination="pagination" row-key="projectId"
						:paginationSmall="size === 'small' ? true : false" :header-cell-style="{background: 'var(--el-fill-color-light)',
						color: 'var(--el-text-color-primary)'}" @page-size-change="handleSizeChange" @page-current-change="handleCurrentChange">
            <template #expand="props">
              <!-- :tree-props="{ children: 'childrens', hasChildren: 'hasChildren' }" default-expand-all -->
              <div class="tableBox" ref="multipleTableRef" style="transform: translateZ(0);" :style="{'width': (tableWidth - 20) +'px'}">
                <pure-table ref="tableRef1" showOverflowTooltip table-layout="auto" border row-key="taskId"
                  :tree-props="{ children: 'childrens', hasChildren: 'hasChildren' }" default-expand-all :row-class-name="getRowClassName"
                  :adaptiveConfig="{ offsetBottom: 108 }" :data="props.row.taskList" :columns="expandColumns"
                  :paginationSmall="true" :header-cell-style="{background: '#e3e3e3', color: 'var(--el-text-color-primary)'}">
                   <!-- :row-class-name="setRowClassName" -->
                  <!-- <template #expand="{row}">
                    <div class="w-full pl-[10px]" v-if="row.childrens.length > 0" :style="{'width': (tableWidth - 30) +'px'}">
                      <el-table :data="row.mechanicalList"  :show-header="false">
                        <el-table-column prop="taskTypeName" label=" " width="140" fixed="left">
                          <template #default="{row}">
                            <div style="padding-left: 20px;">{{row.taskTypeName}}</div>

                          </template>
                        </el-table-column>
                        <el-table-column prop="status" label=" " min-width="80">
                          <template #default="{row}">
                            <div>
                              <div v-if="row.status === 0">
                                <el-tag type="info">未开始</el-tag>
                              </div>
                              <div v-if="row.status === 1">
                                <el-tag type="warning">进行中</el-tag>
                              </div>
                              <div v-if="row.status === 2"><el-tag>挂起跳过</el-tag></div>
                              <div class="flex" v-if="row.status === 3">
                                <el-tag type="success" class="mr-2">已完成</el-tag>

                              </div>
                              <div v-if="row.status === 4">
                                <el-tag type="danger">已关闭</el-tag>
                              </div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column prop="planStartDate" label=" " min-width="280">
                          <template #default="{row}">
                            {{(row.planStartDate ?? '--') + '至'+ (row.planEndDate ?? '--')}}
                          </template>
                        </el-table-column>
                        <el-table-column prop="realStartDate" label=" " min-width="280">
                          <template #default="{row}">
                            {{(row.realStartDate ?? '--') + '至'+ (row.realEndDate ?? '--')}}
                          </template>
                        </el-table-column>
                        <el-table-column prop="completeRate" label=" " min-width="110"></el-table-column>
                        <el-table-column prop="expectHour" label=" " min-width="90">
                          <template #default="{row}">
                            {{row.expectHour || '--'}}
                          </template>
                        </el-table-column>
                        <el-table-column prop="priority" label=" " min-width="90">
                          <template #default="{row}">
                            {{row.priority || '--'}}
                          </template>
                        </el-table-column>
                        <el-table-column prop="hasMultiUser" label=" " min-width="90">
                          <template #default="{row}">
                            {{row.hasMultiUser === 0?'单人':'多人'}}
                          </template>
                        </el-table-column>
                        <el-table-column prop="assigneds" label=" " min-width="120">
                          <template #default="{row}">
                            <div class="assigneds">
                              <span v-for="(item, curr) in row.assigneds" :key="curr" class="str">
                                {{item.user?.name}}<span>, </span>
                              </span>
                              <span v-if="row.assigneds && row.assigneds.length === 0">--</span>
                            </div>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                    <el-divider border-style="dashed" style="margin: 8px 0;" />
                    <div class="w-full pl-[10px]" v-if="row.childrens.length > 0" :style="{'width': (tableWidth - 30) +'px'}">
                      <template v-for="item in row.childrens" :key="item">
                        <div v-if="item.taskType === 1030201 || item.taskType === 1030202 || item.taskType === 1030203">
                          {{item.taskTypeName}}
                        </div>

                      </template>
                    </div>
                  </template> -->

                  <template #status="{row}">
                    <div>
                      <div v-if="row.status === 0">
                        <el-tag type="info">未开始</el-tag>
                      </div>
                      <div v-if="row.status === 1">
                        <el-tag type="warning">进行中</el-tag>
                      </div>
                      <div v-if="row.status === 2"><el-tag>挂起跳过</el-tag></div>
                      <div class="flex" v-if="row.status === 3">
                        <el-tag type="success" class="mr-2">已完成</el-tag>

                        <el-tooltip
                          class="box-item"
                          effect="dark"
                          content="已开发票"
                          placement="top-start"
                        >
                          <el-icon @click="invoicingDetail(row)" v-if="row.invoice"><Printer /></el-icon>
                        </el-tooltip>
                      </div>
                      <div v-if="row.status === 4">
                        <el-tag type="danger">已关闭</el-tag>
                      </div>
                    </div>
                  </template>
                  <template #assigneds="{row}">
                    <div class="assigneds">
                      <span v-for="(item, curr) in row.assigneds" :key="curr" class="str">
                        {{item.user?.name}}<span>, </span>
                      </span>
                      <span v-if="row.assigneds && row.assigneds.length === 0">--</span>
                    </div>
                  </template>
                  <template #assignedExtras="{row}">
                    <div class="assigneds">
                      <span v-for="(item, curr) in row.assignedExtras" :key="curr" class="str">
                        {{item.user?.name}}<span>, </span>
                      </span>
                      <span v-if="row.assignedExtras && row.assignedExtras.length === 0">--</span>
                    </div>
                  </template>
                  <template #operation="{row}" v-if="props.row.status !== 3">
                    <el-button class="reset-margin" link type="primary" v-if="row.status !== 3"
                    	@click="taskDialog(row)">
                    	编辑
                    </el-button>

                  </template>
                </pure-table>
              </div>

            </template>
            <template #taskTypeName="scope">
              <span>{{scope.row.taskTypeName || '--'}}</span>
              <template v-if="scope.row.childTaskTypeName">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="scope.row.childTaskTypeName"
                  placement="top"
                >
                  <el-button :icon="useRenderIcon(BookmarkFill)" size="small" type="text" link></el-button>
                </el-tooltip>
              </template>
            </template>
            <template #surplusDate="{row}">
              <el-tag :type="row.surplusDate >0?'success':'danger'" >{{row.surplusDate || '--'}}</el-tag>
            </template>
            <template #projectType="{row}">
              <span v-if="row.projectType === 1">生产</span>
              <span v-else-if="row.projectType === 2">生产实施</span>
              <span v-else-if="row.projectType === 3">集成 (有生产)</span>
              <span v-else-if="row.projectType === 4">集成 (无生产)</span>
              <span v-else-if="row.projectType === 5">外包</span>
              <span v-else-if="row.projectType === 6">贸易</span>
              <span v-else>其他</span>
            </template>
            <template #isDelive="{row}">
              <el-tag type="success" v-if="row.isDelive === 1">已交付</el-tag>
              <el-tag type="info" v-else>未交付</el-tag>
            </template>
            <template #receiptFull="{row}">
              <el-tag type="success" v-if="row.receiptFull === 1">已结清</el-tag>
              <el-tag type="info" v-else>未结清</el-tag>
            </template>
            <template #statusName="{row}">
              <el-tag type="info" v-if="row.status === 0">{{row.statusName}}</el-tag>
              <el-tag v-else-if="row.status === 1">{{row.statusName}}</el-tag>
              <el-tag type="warning" v-else-if="row.status === 2">{{row.statusName}}</el-tag>
              <el-tag type="success" v-else-if="row.status === 3">{{row.statusName}}</el-tag>
              <el-tag type="danger" v-else-if="row.status === 4">{{row.statusName}}</el-tag>
            </template>
            <template #attachment="{row}">
              <el-button type="primary" size="small" plain @click="seeDetail(row.attachment.contract)">查看</el-button>
            </template>
            <template #contractList="{row}">
              <el-button type="primary" size="small" plain @click="seeDetail(row.attachment.contract_list)">查看</el-button>
            </template>
            <template #technicalProtocol="{row}">
              <el-button type="primary" size="small" plain @click="seeDetail(row.attachment.technical_protocol)">查看</el-button>
            </template>
            <template #description="{row}">
              <!-- <el-tooltip placement="top" popper-style="max-width: 260px">
                <template #content> {{row.description || '--'}} </template>

              </el-tooltip> -->
              <span>{{row.description || '--'}}</span>
            </template>
						<template #operation="{ row }">
              <template v-if="row.status !== 3">
                <el-dropdown placement="bottom-start">
                  <span class="el-dropdown-link mr-[5px]" link type="primary">
                    <el-link :type="row.errorTaskCount > 0?'danger':'primary'" :underline="false"@click="multipleTaskChange(row.projectId)">排任务</el-link>
                  </span>
                  <!-- <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="openDialog('任务详情', row)">看任务</el-dropdown-item>
                    </el-dropdown-menu>
                  </template> -->
                </el-dropdown>
                <el-dropdown placement="bottom-start">
                  <span class="el-dropdown-link mr-[5px]" link type="primary">
                  	<span @click="handleProject('启动项目', row)" v-if="row.status === 0 || row.status === 2">启动</span>
                  	<span @click="handleProject('挂起项目', row)" v-else-if="row.status === 0 || row.status === 1">挂起</span>
                  	<span @click="handleProject('关闭项目', row)" v-else-if="row.status === 0 || row.status === 1 || row.status === 2">关闭</span>
                  	<span @click="handleProject('激活项目', row)" v-else-if="row.status > 3">激活</span>
                    <el-icon class="el-icon--right" v-if="row.status !== 0 && row.status !== 4">
                      <ArrowDown/>
                    </el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <template v-if="row.status === 0">
                        <!-- <el-dropdown-item @click="handleProject('挂起项目', row)">挂起</el-dropdown-item>
                        <el-dropdown-item @click="handleProject('关闭项目', row)">关闭</el-dropdown-item> -->
                      </template>
                      <template v-else-if="row.status === 1">
                        <el-dropdown-item @click="handleProject('关闭项目', row)">关闭</el-dropdown-item>
                        <el-dropdown-item @click="handleProject('完成项目', row)">完成</el-dropdown-item>
                      </template>
                      <template v-else-if="row.status === 2">
                        <el-dropdown-item @click="handleProject('关闭项目', row)">关闭</el-dropdown-item>
                        <el-dropdown-item @click="handleProject('完成项目', row)">完成</el-dropdown-item>
                      </template>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>

                <el-dropdown placement="bottom-start">
                  <span class="el-dropdown-link mr-[5px]" link type="primary">
                  	<span @click="openDialog('编辑项目', row)">编辑</span>
                    <el-icon class="el-icon--right">
                      <ArrowDown />
                    </el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item  @click="handleDelete(row)">删除</el-dropdown-item>
                      <el-dropdown-item @click="openDialog('项目详情', row)">详情</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
              <el-link type="primary" :underline="false" @click="openDialog('项目详情', row)" v-else>详情</el-link>
						</template>
					</pure-table>
				</template>
			</PureTableBar>
		</div>
    <el-dialog
      top="4%"
      v-model="dialogProjectStatus"
      :title="dialogProjectTitle"
      :close-on-click-modal="false"
      width="600px">
      <el-form label-width="auto">
        <el-form-item :label="'实际开始日期'" required v-if="dialogProjectTitle === '启动项目'">
        	<el-date-picker
            v-model="newFormInline.rangeHandleDate"
            type="date"
            placeholder="请选择"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            class="w-full"
          />
        </el-form-item>

        <el-form-item :label="'实际关闭日期'" required v-if="dialogProjectTitle === '关闭项目'">
        	<el-date-picker
            v-model="newFormInline.rangeHandleDate"
            type="date"
            placeholder="请选择"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            class="w-full"
          />
        </el-form-item>
        <el-form-item :label="'实际完成日期'" required v-if="dialogProjectTitle === '完成项目'">
        	<el-date-picker
            v-model="newFormInline.rangeHandleDate"
            type="date"
            placeholder="请选择"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            class="w-full"
          />
        </el-form-item>
        <el-form-item :label="'起止时间'" required v-if="dialogProjectTitle === '激活项目'">
        	<el-date-picker
            v-model="newFormInline.rangeHandleDate"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            class="w-full"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
        	<el-input v-model="newFormInline.remarks" clearable placeholder="请输入备注" :rows="3" type="textarea"/>
        </el-form-item>
        <div class="flex-c w-full mb-[50px]">
          <el-button type="primary" @click="confirmDialogProject">{{dialogProjectTitle}}</el-button>
        </div>
        <el-divider />
        <div style="border: 1px solid #dcdfe6;padding: 20px;max-height: 450px;overflow: auto;">
        	<div class="mb-[10px]">
            历史记录
          </div>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in dialogInfo.operateLog"
              :key="index"
              :hide-timestamp="false"
            >
              <p class="">{{ activity.operateTime }}, 由 <strong>{{ activity.operateName }}</strong> {{activity.operateTypeStr}}。</p>
              <div class="timeline-remarks" v-if="activity.remarks">{{ activity.remarks }}</div>
              <!-- <template #dot>
                <span class="timeline-dot">{{index+1}}</span>
              </template> -->
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-form>
    </el-dialog>
	</div>
</template>

<style scoped lang="scss">
	.main-content {
		margin: 10px 10px 0 !important;
	}
  .assigneds {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .assigneds .str:last-child span{
    display: none;
  }
  :deep(.el-icon--right) {
    margin-left: 0;
  }
  .tableBox {
    position: sticky;
    left: 0;
    z-index: 3; /* 确保嵌套表格在主表格之上 */

  }
  :deep(.tableBox .el-table__expand-icon.el-table__expand-icon--expanded) {
    visibility: hidden;
  }
  :deep(.tableBox .el-table__expand-column.el-table-fixed-column--left) {
    display: none;
  }
  :deep(.tableBox .el-table__body colgroup > col:last-child) {
    width: auto !important;
  }
  .taskMyActive {
    border-color: #409eff;
    // padding: 4px 10px;
    color: #409eff;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
    margin-top: 6px;
  }
  :deep(.no-expand .el-table__expand-icon) {
    display: none;
  }
  :deep(.no-expand+tr) {
    display: none;
  }
  :deep(.tableBox .el-table__body .el-table__row--level-1 td:nth-child(1)) {
    border-bottom: none;
  }
  :deep(.tableBox .el-table .custom-row-tr + .el-table__row--level-1 + .el-table__row--level-1 + .el-table__row--level-1 td:nth-child(1)),
  :deep(.tableBox .el-table .custom-row-tr + .el-table__row--level-1 + .el-table__row--level-1 + .el-table__row--level-1 + .el-table__row--level-1 + .el-table__row--level-1 + .el-table__row--level-1 td:nth-child(1)){
    border-bottom: 1px solid #ebeef5;
  }
  :deep(.el-timeline-item) {
    padding-bottom: 5px;
  }
  :deep(.el-timeline-item__timestamp.is-bottom) {
    margin-top: 0;
  }
  .timeline-remarks {
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    background: #eff1f3;
    margin-top: 5px;
  }
  .timeline-dot {
    width: 16px;
    height: 16px;
    font-size: 12px;
    border-radius: 100%;
    border: 1px solid #ebedf3;
  }
</style>
